<template>
  <div ref="chartContainer" class="chart-wrapper"></div>
</template>

<script setup>
import { ref, watch, onMounted, onBeforeUnmount } from "vue";
import ApexCharts from "apexcharts";
import { useAppStore } from "@/stores/app";

const appStore = useAppStore();

const props = defineProps({
  data: {
    type: Object,
    required: true
  }
});

const chartContainer = ref(null);
let chartInstance = null;

// 硬编码的样式配置
const CHART_STYLE = {
  color: "#0ab39c",      // 柱子颜色
  width: "20px",         // 柱子宽度
  borderRadius: 0,       // 无圆角
  borderWidth: 1,        // 边框宽度
  borderColor: "#0ab39c" // 边框颜色
};

// 获取当前主题的颜色方案
const getThemeColors = () => {
  return appStore.darkMode
    ? {
        text: "#FFF",
        axisLabel: "#CCC",
        gridBorder: "#444",
        tooltipBg: "#2D2D3D",
      }
    : {
        text: "#666",
        axisLabel: "#666",
        gridBorder: "#E0E0E0",
        tooltipBg: "#FFF",
      };
};

// 创建图表配置
const createChartOptions = () => {
  const colors = getThemeColors();

  return {
    chart: {
      type: "bar",
      height: 350,
      toolbar: { show: false },
      background: "transparent",
    },
    series: [{
      name: props.data.datasets[0].label,
      data: props.data.datasets[0].data
    }],
    colors: [CHART_STYLE.color],
    plotOptions: {
      bar: {
        borderRadius: CHART_STYLE.borderRadius,
        horizontal: false,
        columnWidth: CHART_STYLE.width,
        fill: {
          colors: [CHART_STYLE.color]
        }
      }
    },
    dataLabels: {
      enabled: false
    },
    stroke: {
      show: true,
      width: CHART_STYLE.borderWidth,
      colors: [CHART_STYLE.borderColor]
    },
    fill: {
      type: 'solid',
      colors: [CHART_STYLE.color],
      opacity: 1
    },
    xaxis: {
      categories: props.data.labels,
      axisBorder: { show: false },
      axisTicks: { show: false },
      labels: {
        style: {
          colors: colors.axisLabel,
          fontSize: "12px"
        }
      }
    },
    yaxis: {
      labels: {
        style: {
          colors: colors.axisLabel,
          fontSize: "12px"
        }
      },
      grid: {
        borderColor: colors.gridBorder,
        strokeDashArray: 4
      }
    },
    grid: {
      borderColor: colors.gridBorder,
      strokeDashArray: 4,
      padding: {
        top: 0,
        right: 30,
        bottom: 0,
        left: 30
      }
    },
    tooltip: {
      theme: appStore.darkMode ? "dark" : "light",
      style: {
        background: colors.tooltipBg,
        color: colors.text
      },
      y: {
        formatter: function (val) {
          return val;
        }
      }
    }
  };
};

// 更新图表主题
const updateTheme = () => {
  if (chartInstance) {
    const newOptions = createChartOptions();
    chartInstance.updateOptions(newOptions);
  }
};

// 初始化图表
const initChart = () => {
  if (!chartContainer.value) return;

  if (chartInstance) {
    chartInstance.destroy();
    chartInstance = null;
  }

  const chartOptions = createChartOptions();

  chartInstance = new ApexCharts(chartContainer.value, chartOptions);
  chartInstance.render();
};

// 监听数据变化
watch(
  () => props.data,
  (newData) => {
    if (chartInstance) {
      chartInstance.updateOptions({
        series: [{
          name: newData.datasets[0].label,
          data: newData.datasets[0].data
        }],
        xaxis: {
          categories: newData.labels
        }
      });
    }
  },
  { deep: true }
);

// 监听主题变化
watch(
  () => appStore.darkMode,
  () => {
    updateTheme();
  }
);

onMounted(initChart);
onBeforeUnmount(() => {
  if (chartInstance) {
    chartInstance.destroy();
  }
});
</script>

<style scoped>
.chart-wrapper {
  position: relative;
  height: 350px;
  width: 100%;
}
</style>